import React, { useEffect, useState, useRef, useMemo } from 'react'
import { Button, View, ScrollView, Text, Image, RichText } from '@tarojs/components'
import { FixedSizeList } from 'react-window'
// import treeData from "./treeData";
export default function IndexPage() {
  const [num, setNum] = useState(0)
  const add = () => {
    console.log(23123)

    setNum(num + 1)
  }

  // 树形结构数据示例
  const treeData = [
    {
      id: 1,
      name: 'Node 1',
      children: [
        {
          id: 11,
          name: 'Node 1.1',
          children: [
            { id: 111, name: 'Node 1.1.1', children: [] },
            { id: 112, name: 'Node 1.1.2', children: [] }
          ]
        },
        { id: 12, name: 'Node 1.2', children: [] }
      ]
    },
    {
      id: 2,
      name: 'Node 2',
      children: [
        { id: 21, name: 'Node 2.1', children: [] },
        { id: 22, name: 'Node 2.2', children: [] }
      ]
    }
  ]

  // 自定义渲染函数
  const Row = ({ index, style ,a}) => {
    console.log('renderTree',index, style,a);

    return <View style={style}>{index}</View>
  }
  // 递归渲染树形结构
  const renderTree = (nodes, depth = 0) => {
    return nodes.map((node) => (
      <View key={node.id}>
        <FixedSizeList height={100} width={300} itemSize={20} itemCount={node.children.length}>
          {Row}
        </FixedSizeList>
        {node.children.length > 0 && renderTree(node.children, depth + 1)}
      </View>
    ))
  }

  return (
    <View>
      {renderTree(treeData)}
      {/* <FixedSizeList
        height={400}
        width={300}
        itemSize={200}
        itemCount={treeData.length}
      >
        {Row}
      </FixedSizeList> */}
    </View>
  )
}
